<template>
  
  
      <div class="container">
  
        <div class="top">
          <current ref="current" :checked="checked" :WarnValue="WarnValue" :tel="tel" @refresh="refresh"></current>
  
        </div>
  
        <div class="bottom">
  
  
          <div :class="mode == 2 ? 'chartT2' : 'chartT'">
            <div :style="mode == 2 ? '' : tab == 1 ? 'z-index:9' : 'z-index:8'">
              <history ref="history" @stopRefresh="canfresh = false">
              </history>
            </div>
            <div :style="mode == 2 ? '' : tab == 2 ? 'z-index:9' : 'z-index:8'">
              <history2 ref="history2" @stopRefresh="canfresh = false">
              </history2>
            </div>
            <div :style="mode == 2 ? '' : tab == 3 ? 'z-index:9' : 'z-index:8'">
              <history3 ref="history3" @stopRefresh="canfresh = false">
              </history3>
            </div>
  
            <div :style="mode == 2 ? '' : tab == 4 ? 'z-index:9' : 'z-index:8'">
              <history4 ref="history4" @stopRefresh="canfresh = false" :checked="checked" :WarnValue="WarnValue"
                :tel="tel"></history4>
            </div>

                 <div :style="mode == 2 ? '' : tab == 5 ? 'z-index:9' : 'z-index:8'">
              <history5 ref="history5" @stopRefresh="canfresh = false" :checked="checked" :WarnValue="WarnValue"
                :tel="tel"></history5>
            </div>
  
          </div>
  
  
  
          <div class="tabs" v-show="mode == 1">
            <div class="tab1" :style="tab == 1 ? '' : 'background:#d5e7f7'" @click="tab = 1">
              丙酸甲酯浓度历史
            </div>
            <div class="tab1" :style="tab == 2 ? '' : 'background:#d5e7f7'" @click="tab = 2">
              甲醇浓度历史
            </div>
            <div class="tab1" :style="tab == 3 ? '' : 'background:#d5e7f7'" @click="tab = 3">
              配体浓度历史
            </div>
  
            <div class="tab1" :style="tab == 4 ? '' : 'background:#d5e7f7'" @click="tab = 4">
              PH历史
            </div>

               <div class="tab1" :style="tab == 5 ? '' : 'background:#d5e7f7'" @click="tab = 5">
              乙二酸二甲酯浓度历史
            </div>
  
            <!-- <div class="tab1" style="margin-top: 2rem" @click="refresh">
                 刷新
            </div> -->
  
            <!-- <div v-show="canfresh == false" class="tab1" style="margin-top: 2rem" @click="continuRefresh">
              继续刷新
            </div> -->
  
          </div>
  
  
  
          <div>
  
          </div>
        </div>
  
  
  
  
  
  
  
  
        <div class="controlBar">
          <div class="left">
            每隔
            <a-input-number v-model="number2" :min="1" :max="100000" :step="1" @change="onChange2"
              :formatter="(value) => `${value}秒`" :parser="(value) => value.replace(/秒/g, '')" />
            刷新一次
          </div>
          <div class="left">
            展示模式
            <a-select style="width: 10rem;" v-model="mode" @change="onChangeMode">
              <a-select-option value="1">1</a-select-option>
              <a-select-option value="2">2</a-select-option>
            </a-select>
  
          </div>
  
  
  
          <div style="padding-right: 3rem; display: flex;align-items:center;">
            <!-- <span style="padding-right: 0.6rem">报警阈值（低位）</span>
            <a-input-number v-model="WarnValue" :min="1" :max="1000" :step="1" @change="setWarnValue" /> -->
  
            <div>
              <span style="padding-right: 0.6rem">手机号</span>
              <a-input v-model="tel" @change="setTel" />
            </div>
            <div style="display: flex; flex-direction: row-reverse">
              <a-switch @change="checkedChange" v-model="checked" checked-children="短信报警已开启"
                un-checked-children="短信报警已关闭" />
            </div>
          </div>
  
  
          <div>
            <div class="right">
              <span style="padding-right: 0.6rem">工控机地址</span>
              <a-input :value="address" @change="change"></a-input>
  
  
              <a-button @click="close" v-show="IsStartCircle">取消</a-button><a-button @click="open" type="primary"
                v-show="!IsStartCircle">确定</a-button>
            </div>
            <div style="display: flex;align-items: center;">
              <div class="status" :style="`background-color:${statusColor}`"></div>
              <span>{{ netStatus }}</span>
            </div>
          </div>
  
        </div>
  
  
      </div>
  
 
  </template>
  
  <script>
  import current from "./current.vue";
  
  import history from "./history.vue";
  import history2 from "./history2.vue";
  import history3 from "./history3.vue";
  import history4 from "./history4.vue";
    import history5 from "./history5.vue";
  export default {
    components: {
      history, current, history2, history3, history4,history5
    },
    mounted() {
  
      let ad = localStorage.getItem("address");
      this.tel = localStorage.getItem("tel") || "";
      this.WarnValue = localStorage.getItem("WarnValue") || 300;
  
      let isDev = process.env.NODE_ENV !== "production";
  
      if (
        ad == null ||
        ad == "null" ||
        ad == undefined ||
        ad == "" ||
        ad == "undefined"
      ) {
        if (isDev) {
          this.address = "127.0.0.1";
        } else {
          this.address = "192.168.10.188";
        }
      } else {
        this.address = ad;
      }
  
      this.$ipcRenderer.on_connect_reply(
        (type) => {
          if (type == "S") {
            this.status_connected();
            this.startCircle();
            this.IsStartCircle = true;
          }
          if (type == "F") {
            this.status_disconnected();
          }
          if (type == "DF") {
             this.netStatus = "数据拉取失败，请检查网络或重试";
             this.statusColor = "red";
             this.$ipcRenderer.send("disConnectServer", this.address);
             this.stopCircle();
             this.IsStartCircle = false;
          }
     
        }
      );
  
      window.addEventListener('resize', this.updateContainer, false);
    },
    data() {
      return {
        address: "127.0.0.1",
        number2: 60,
        circleInterval: null,
        checked: false,
        WarnValue: 300,
        tab: 1,
        canfresh: true,
        tel: "",
        IsStartCircle: false,
        mode: 2,
        netStatus: "未连接",
        statusColor: "red",
        modeOption: [{
          label: "模式1",
          value: 1
        }, {
          label: "模式1",
          value: 1
        }, {
          label: "模式2",
          value: 2
        }]
  
      };
    },
    methods: {
  
  
      status_connected() {
        this.netStatus = "已连接";
        this.statusColor = "green"
      },
      status_disconnected() {
        this.netStatus = "未连接";
        this.statusColor = "red"
  
      },
  
  
  
  
      onChangeMode(value) {
        console.log("🚀 ~ onChangeMode ~ value:", value)
        this.mode = value;
        this.canfresh = true
        this.$nextTick().then(_ => {
  
          this.updateContainer()
          // this.getData();
  
        })
      },
      setWarnValue(e) {
        this.WarnValue = e.target.value;
        localStorage.setItem("WarnValue", e.target.value);
      },
  
      refresh() {
  
        // if (this.canfresh == false) return;
        this.canfresh = true
        this.getData();
  
  
  
      },
      continuRefresh() {
        this.canfresh = true;
        this.refresh()
      },
      getData() {
  
        if (this.canfresh == false) return;
        this.$ipcRenderer.send("getRamanResults"); //
        this.$ipcRenderer.send("getRamanResults", "history"); //拉取拉曼测试结果
  
        this.$ipcRenderer.send("getPHResults"); //
        this.$ipcRenderer.send("getPHResults", 'history'); //
        this.$ipcRenderer.send("getPHResults", 'tenminutes'); //
  
      },
  
  
  
      open() {
        this.$ipcRenderer.send("connectServer", this.address);
  
        // setTimeout(() => {
        //   this.startCircle();
        //   this.IsStartCircle = true;
        // }, 600);
      },
      close() {
        this.$ipcRenderer.send("disConnectServer", this.address);
        this.stopCircle();
        this.IsStartCircle = false;
        this.status_disconnected();
      },
      change(e) {
        this.address = e.target.value;
  
        localStorage.setItem("address", e.target.value);
      },
  
      onChange2(value) {
        this.number2 = value;
      },
  
  
      startCircle() {
        this.circleDo();
        this.circleInterval = setInterval(() => {
          this.circleDo();
        }, Number(this.number2) * 1000);
      },
  
      stopCircle() {
        clearInterval(this.circleInterval);
        this.circleInterval = null;
      },
  
      circleDo() {
  
        this.getData()
  
      },
      checkedChange(value) {
        this.checked = value;
      },
  
  
      setTel(e) {
        this.tel = e.target.value;
        localStorage.setItem("tel", e.target.value);
      },
      updateContainer() {
        this.$nextTick().then(_ => {
          this.$refs.history.resizeChart()
          this.$refs.history2.resizeChart()
          this.$refs.history3.resizeChart()
          this.$refs.history4.resizeChart()
        })
  
      }
  
    },
  };
  </script>
  
  <style lang="less">

  
  .tabs {
  
    z-index: 10;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 5px;
    align-items: center;
    justify-content: center;
  
    .tab1 {
      margin-top: 5px;
      border-radius: 5px;
      padding: 5px 10px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      background-color: #1890ff;
      margin-right: 20px;
    }
  }
  

  
  .controlBar {
    height: 10%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-radius: 10px;
    margin-top: 10px;
    color: #000;
  
    .left {
      .ant-input-number {
        margin: 0 10px;
      }
  
      .ant-btn {
        margin-left: 10px;
      }
    }
  
    .right {
      display: flex;
      align-items: center;
  
      .ant-input,
      .status,
      .ant-btn {
        margin-left: 10px;
      }
    }
  
    .ant-input {
      width: 200px;
    }
  
    .status {
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background-color: #ff0000;
      margin-right: 5px;
    }
  }
  
  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
  
    .top {
      background-color: #fff;
      margin-bottom: 10px;
      padding: 20px;
  
  
    }
  
    .bottom {
      width: 100%;
      flex: 1;
      display: flex;
      overflow: auto;
    }
  
  
  }
  
  .chartT {
    position: relative;
    flex: 1;
    background-color: #fff;
    height: 650px;
  
    >div {
      position: absolute;
      width: 100%;
      height: 100%
    }
  }
  
  .chartT2 {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    height: 650px;
  
    >div {
      height: 50%;
      width: 50%
    }
  
  }
  
  .status {
    background-color: #ff0000;
    height: 10px;
    width: 10px;
    border-radius: 50%;
  }
  </style>
  